<template>
	<view class="home bgf6">

		<scroll-view class="list rel bgf6" @scroll="onScroll" @scrolltolower="nextPage" scroll-y  lower-threshold="550">
			
			<view class="logobox shadow" :class="fixedClass" :style="{paddingTop: statusBar + 'px'}">
				
				<image class="title px12" src="https://img.quexiaqp.com/uploads/20250520/871526db124f499ee5694d623e96ee9b.png" mode="widthFix"></image>
				<view class="tabbox px12 c66 fs14 pb12 flex flexC" :class="fixedClass">
					<view v-for="(item,index) in tabs" class="item pr20 py6" :key="index" @click="clickTabType(index)">
						<text :class="selIndex == index ? 'active' : ''">{{item.name}}</text>
						<image v-if="selIndex == index" class="icon" src="/static/img/icon/sel.png" mode="widthFix">
						</image>
					</view>
					<view class="flex1 aliR">
						<image class="img2" src="https://img.quexiaqp.com/don.gif" mode="widthFix"></image>
					</view>
				</view>
			</view>
			
			<!-- <image class="bg" src="/static/img/bg/bghead.png" mode="widthFixw"></image> -->

			<!-- <view class=" rel flex flexC fs12 pr12 pb10 ">
			<view @click="clickCity" class="px10 c1a flex flexC">
				<text class="aliC ">{{city}}</text>
				<image class="down " src="/static/img/icon/arrow_down.png" mode="widthFix"></image>
			</view>
			<view class="r40 flex flexC flex1 bgf2 px12 py4">
				<image class="sear" src="/static/img/icon/search.png" mode="aspectFill"></image>
				<input @input="search" class="pl8 flex1 fs12" v-model="keyword" confirm-type="search" type="text"
					placeholder="搜索门店">
			</view>
			<image @click="clickBrand" class="brand ml10" src="/static/img/icon/brand.png" mode="widthFix"></image>
		</view> -->
		
			<swiper autoplay circular class="bgImg boxS">
				<swiper-item>
					<image class="w-20"
						src="https://img.quexiaqp.com/uploads/20251010/7e7a68a812a67ed57cae8ea0a70497c2.jpg"
						mode="widthFix" @click="bannerClick()"></image>
				</swiper-item>
				<swiper-item>
					<image class="w-20"
						src="https://img.quexiaqp.com/uploads/20250818/dbfe011003d3d8f6af35dc6b776c2d51.jpg"
						mode="widthFix" @click="bannerClick()"></image>
				</swiper-item>
				
				<!-- //公司营业执照 -->
				<!-- <swiper-item>
					<image class="w-20"
						src="https://img.quexiaqp.com/uploads/20251013/886c5fe10f01dbed682dafb9d45e9461.jpg"
						mode="widthFix" @click="bannerClick()"></image>
				</swiper-item> -->
			</swiper>
			
			
			<view class="searchbox r5 fs14 px8 pb12 bgff mx14 m6 px10 py6">
				<image class="bgImage" src="/static/img/bg/card.png" mode="aspectFill"></image>
				<view class="title flexB flex flexC">
					<!-- <image class="logo" src="/static/img/icon/title.png" mode="widthFix"></image> -->
					<image class="logo" src="https://img.quexiaqp.com/uploads/20250520/871526db124f499ee5694d623e96ee9b.png" mode="widthFix"></image>
					<image @click="clickBrand" class="brand" src="/static/img/icon/brand2.png" mode="aspectFill"></image>
					
					<!-- <image @click="clickBrand" class="brand_2" src="/static/img/icon/kaidian.png" mode="aspectFill"></image> -->
				</view>
				<view class="r40 search px14 mt4 flex flexC py5">
					<image class="sear" src="/static/img/icon/search.png" mode="aspectFill"></image>
					<input @input="search" class="pl8 flex1 fs14 bold6" v-model="keyword" confirm-type="search"
						type="text" placeholder="请输入门店名称" />
					<text class="px8 c99 fs11">|</text>
					<view class="cfad" @click="search">搜索</view>
				</view>
			</view>

			<view class="menubox py6 mx14 mb2 mt6 bgff r5 flex flexC aliC">
				<view class="item flex1" @click="clickType('tq')">
					<image class="icon" src="/static/img/icon/ball2_icon.png" mode="aspectFill"></image>
					<view class="fs15 c1a fs15 bold6">台球竞技</view>
					<view class="fs10 c66">赛事级球桌</view>
				</view>
				<view class="item flex1" @click="clickType('qp')">
					<image class="icon" src="/static/img/icon/fa_icon.png" mode="aspectFill"></image>
					<view class="fs15 c1a fs15 bold6">麻将棋牌</view>
					<view class="fs10 c66">高定麻将机</view>
				</view>
				<view class="item flex1" @click="clickType('ktv')">
					<image class="icon" src="/static/img/icon/ktv_icon.png" mode="aspectFill"></image>
					<view class="fs15 c1a fs15 bold6">KTV</view>
					<view class="fs10 c66">殿堂级音效</view>
				</view>
			</view>

			<view class="flex flexC flexB contbox px8">
				<view class="flex1">
					<view class=" left" @click="scanTable">
						<image class="imgbg" src="/static/img/bg/scanbg.png" mode="widthFix"></image>
						<view class="cont boxS cff pl22 pt25 boxS aliL">
							<view class="fs20 bold6">扫码开台/开包厢</view>
							<view class="fs10 mt2">请扫描桌面的二维码</view>
							<button class="btn r40 fs11">点击扫码</button>
						</view>
					</view>
					<!-- 	<view class="left2" @click="clickYue">
					<image class="imgbg" src="/static/img/bg/reservation.png" mode="widthFix"></image>
					<view class="cont boxS cff pl16 pt10 aliL">
						<view class="fs18 bold6">同城约球</view>
						<view class="fs10 mt2 flex flexC">
							<text class="px2"></text>
							<image v-for="(item,index) in 2" class="avatar" src="/static/logo.jpg" mode="aspectFill"></image>
							<text class="ml4">2+人等你来约~</text></view>
					</view>
				</view -->
				</view>
				<view class="flex1 right">
					<view class="box aliR" @click="clickCharge">
						<image class="imgbg" src="/static/img/bg/rechargebg.png" mode="widthFix"></image>
						<view class="cont boxS cff pl35 pt10 aliL">
							<view class="fs18 bold6">会员充值</view>
							<view class="fs10 mt2">充会员更划算哦~</view>
						</view>
					</view>
					<view class="box aliR" @click="mtClick">
						<image class="imgbg2" src="/static/img/bg/groupbg.png" mode="widthFix"></image>
						<view class="cont boxS cff pl25 pt8 aliL">
							<view class="fs18 bold6">团购核销</view>
							<view class="fs10 mt2">美团/抖音/快手</view>
						</view>
					</view>
					<!-- <view class="box aliR box2" @click="clickGame">
					<image class="imgbg3" src="/static/img/bg/game.png" mode="widthFix"></image>
					<view class="cont boxS cff pl20 pt10 aliL">
						<view class="fs18 bold6">在线赛事</view>
						<view class="fs10 mt2">敬请期待...</view>
					</view>
				</view> -->
				</view>
			</view>

			<!-- :class="fixedClass"
			:style="{top: fixedClass ? 'calc(180rpx + ' + (statusBar - 7) + 'px)' : 0}" -->
			<view v-if="!fixedClass" class="tabbox bgf6 c66 fs14 px12 pb16 pt6 flex flexC">
				<view v-for="(item,index) in tabs" class="item pr20 py6" :key="index" @click="clickTabType(index)">
					<text :class="selIndex == index ? 'active' : ''">{{item.name}}</text>
					<image v-if="selIndex == index" class="icon" src="/static/img/icon/sel.png" mode="widthFix"></image>
				</view>
				<view class="flex1 aliR">
					<image class="img2" src="https://img.quexiaqp.com/don.gif" mode="widthFix"></image>
				</view>
			</view>
			<view class="listBox">
				<block v-for="(item,index) in list" :key="index">
					<store-item :id="'item'+index" :index="index" :item="item" @location="location" @call="call"
						@detail="detail"></store-item>
				</block>
			</view>
		</scroll-view>
		<!-- 城市选择 -->
		<uni-popup ref="citypicker" type="bottom">
			<city-picker @selectCity="selectCity" :list="cityList"></city-picker>
		</uni-popup>
		<msg-pop></msg-pop>
		<!-- 开大门，开包厢，续单 -->
		<slide-button :scrollIng="scrollIng"></slide-button>

	</view>
</template>

<script>
	import msgPop from '@/components/msg-pop/msg-popup.vue';

	const statusBar = uni.getSystemInfoSync().statusBarHeight + 5;
	export default {
		components: {
			msgPop
		},

		data() {
			return {
				statusBar,
				keyword: '',
				lat: '28.2129183',
				lng: '112.88881136',
				city: '',
				cityList: [],
				banner: [],
				locationCity: '',
				page: 1,
				list: [],
				code: '',
				isLastPage: false,
				isnodata: false,
				orgId: 27,
				scrollIng: false,
				timer: null,
				fixedClass: '',
				scrollTop: 0,
				changeTab: false,
				tabs: [{
						name: '全部'
					},
					{
						name: '台球'
					},
					{
						name: '棋牌'
					},
					{
						name: 'KTV'
					}
				],
				selIndex: 0,
				type: '',
				isRequestIng: false
			}
		},
		onLoad() {
			this.getLocation();
			console.log('===-onLoad- 加载的经纬度==>>>'+this.lat)
			uni.setStorageSync("orgId", this.orgId);
			var token = uni.getStorageSync("token");
			if (token == null || token == '') {
				this.init();
			}
			
		},
		onTabItemTap: function(e) {
			console.log(e);
			uni.vibrateShort({
				success: function() {
					console.log('success');
				}
			});
		},
		onPullDownRefresh() {
			this.isLastPage = false;
			this.isnodata = false;
			this.page = 1;
			this.list = [];
			this.getShopList();
		},
		onShow() {
			this.getLocation();
			console.log('===onShow-加载的经纬度==>>>'+this.lat)
			var city = uni.getStorageSync("city");
			console.log('===onShow加载的城市==>>>'+city)
			if (city != "") {
				this.isLastPage = false;
				this.isnodata = false;
				this.page = 1;
				this.list = [];
				this.city = city;
				uni.removeStorageSync("city");
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '台球·棋牌·KTV 尽在雀侠', //自定义分享标题
				path: '/pages/home/index2', // '/pages/...'分享页面路径（打开分享时进入页），以/开头
				imageUrl: "https://img.quexiaqp.com/uploads/20250520/ea8e4f3ffc3af21d418a4a7471598a87.jpg"
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: "台球·棋牌·KTV 尽在雀侠",
				path: '/pages/home/index2', // '/pages/...'分享页面路径（打开分享时进入页），以/开头
				imageUrl: "https://img.quexiaqp.com/uploads/20250520/ea8e4f3ffc3af21d418a4a7471598a87.jpg"
			}
		},
		methods: {
			clickType(type) {
				if(type == 'ktv'){
					uni.navigateToMiniProgram({
						appId:"wx86160f502fd2c58b",
					    path: 'pages/home/index2'// path 路径
					})
				}else{
					uni.navigateTo({
						url: '../home/list?type=' + type
					})
				}
			},

			clickGame() {
				uni.showToast({
					title: "敬请期待，即将上线",
					icon: 'none'
				})
			},

			clickYue() {
				uni.navigateTo({
					url: '../reservation/index'
				})
			},

			clickBrand() {
				uni.navigateTo({
					url: '../shop/webview2'
				})
			},

			search() {
				console.log("检索的名称:"+this.keyword);
				// uni.navigateTo({
				// 	url: '/pages/shop/search'
				// })
				this.list = [];
				this.page = 1;
				this.isLastPage = false,
				this.isnodata = false,

				this.getShopList();
			},

			clickTabType(index) {
				console.info("====点击ktv项目==>>>"+index)
				if(index == 3){
					uni.navigateToMiniProgram({
						appId:"wx86160f502fd2c58b",
					    path: 'pages/home/index2'// path 路径
					})
				}else{
					this.changeTab = true;
					if (index == 0) {
						this.type = '';
					} else if (index == 1) {
						this.type = 'tq';
					} else if (index == 2) {
						this.type = 'qp';
					} else {
						this.type = 'ktv';
					}
					this.selIndex = index;
					this.list = [];
					this.page = 1;
					this.isLastPage = false;
					this.isnodata = false;
					this.getShopList();
					setTimeout(() => {
						this.changeTab = false;
					},1000)
				}
				
			},

			mtClick() {
				uni.navigateTo({
					url: '../home/mtdou'
				})
			},

			clickCharge() {
				uni.navigateTo({
					url: '../discount/newCharge'
				})
			},

			scanTable() {
				uni.scanCode({
					success: function(res) {
						console.info(res);
						var path = res.path;
						var page = path.split("?");
						var pageIndex = page[0];
						var str = path.split("=");
						var str2 = str[1];
						console.info("===path==" + str[1]);
						var shopId = str2.split("-")[0];
						var tableId = str2.split("-")[1];
						if (pageIndex == 'pages/order/submit') {
							uni.navigateTo({
								url: '../order/submit?id=' + tableId
							})
						} else {

							uni.navigateTo({
								url: '../order/ballSubmit?id=' + tableId
							})
						}

					}
				})
			},

			clickCity() {
				uni.navigateTo({
					url: '../city/select?city=' + this.city
				})
			},

			onScroll(ev) {
				// 监听页面的滚动开始和结束
				if(this.changeTab) return;
				clearTimeout(this.timer);
				this.timer = null;
				this.scrollIng = true;
				this.fixedClass = ev.detail.scrollTop > 400 ? 'fixedTop' : '';
				this.timer = setTimeout(() => {
					this.scrollIng = false;
				}, 2000);
			},

			// bannerClick() {
			// 	uni.navigateTo({
			// 		url: '../member/join'
			// 	})
			// },
			
			bannerClick() {
				uni.navigateTo({
					url: '/other/join/join'
				})
			},
			
			nextPage() {
				if (this.isLastPage) return;
				this.page += 1;
				this.getShopList();
			},

			selectCity(item) {

				this.$refs.citypicker.close();
				this.city = item;
				this.list = [];
				this.page = 1;
				this.isLastPage = false,
					this.isnodata = false,
					this.getShopList();
			},

			doSearch() {
				console.info("===search====");
				uni.navigateTo({
					url: '../shop/search'
				})
			},

			init() {

				let _this = this;
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						let provider = res.provider;
						uni.setStorageSync("provider", provider)
					},
					fail: function(res) {

					}
				});
				uni.login({
					provider: uni.getStorageSync("provider"),
					success: function(loginRes) {
						console.info(loginRes);
						let code = loginRes.code;
						_this.code = code;
						_this.autoLogin();

					},
					fail: function(res) {

					}
				})
			},

			autoLogin() {
				let that = this;
				let param = {
					code: this.code,
					orgId: this.orgId
				}
				this.$api.autoLogin(param).then(res => {

					if (res.code == 1) {
						uni.setStorageSync("mobile", res.data.mobile);
						uni.setStorageSync("token", res.data.token);
						uni.setStorageSync("avatar", res.data.avatar);
						uni.setStorageSync("username", res.data.username)
					}
					console.info(res);
				})

			},

			location(item) {
				uni.openLocation({
						name: item.name,
						latitude: parseFloat(item.lat),
						longitude: parseFloat(item.lng),
						address: item.address,
						fail: function(res) {
							console.info(JSON.stringify(res))
						}
					},

				)
				console.log("===========location===============" + JSON.stringify(item))
			},
			
			call(item) {

				uni.makePhoneCall({
					phoneNumber: item.tel
				})
				console.log("call" + JSON.stringify(item))

			},
			
			detail(item) {
				console.log("detail" + JSON.stringify(item))
				uni.navigateTo({
					url: '../shop/detail?id=' + item.id + "&distance=" + item.distance
				})
			},

			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.lat = res.latitude;
						that.lng = res.longitude;

						uni.setStorageSync("lat", that.lat);
						uni.setStorageSync("lng", that.lng);
						that.initData();
						that.getShopList();
					},
					fail: function(res) {
						console.info("location  fail" + JSON.stringify(res))
						that.getShopList();
					}
				})
			},

			initData() {

				let that = this;

				let param = {
					lat: this.lat,
					lng: this.lng,
					orgId: uni.getStorageSync("orgId")
				};

				this.$api.getCity(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.city = res.data.cityName;
						if (that.city == '' || that.city == null) {
							that.city = "";
						}
						uni.setStorageSync("city",that.city);
						that.cityList = res.data.cityList;
						that.locationCity = res.data.cityName;
						that.banner = res.data.banner
					} else {

					}
				})
			},

			getShopList() {

				let that = this;

				var city = "";
				if (this.city == this.locationCity) {
					city = "";
				} else {
					city = this.city;
				}

				if (this.city == '请选择城市') {
					city = "";
				}

				let param = {
					lat: this.lat,
					lng: this.lng,
					city: city,
					page: this.page,
					orgId: uni.getStorageSync("orgId"),
					type: this.type,
					keyword: this.keyword

				};

				if (this.isRequestIng == true) return;

				this.isRequestIng = true;
				this.$api.getShop(param).then(res => {

					that.isRequestIng = false;
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
						if (length < 10) {
							that.page = 4;//店铺数据加载完后，从第4页开始重复加载
							// this.isLastPage = true;
						}
						// if (that.list.length > 0) {
						// 	that.isnodata = false;
						// } else {
						// 	that.isnodata = true;
						// }
						
						if (that.list.length > 0) {
							that.isnodata = false;
						} else {
							that.page = 4;
						}
						
					} else {

					}
				})

			},

			onShowCityPicker() {
				this.$refs.citypicker.open();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		position: relative;

		.listBox {
			min-height: 1000rpx;
		}

		.logobox {
			position: fixed;
			top: -100rpx;
			width: 100%;
			z-index: 99;
			box-sizing: border-box;
			transition: top .6s ease, opacity .6s ease;
			background-color: #fff;
			opacity: 0;

			&.fixedTop {
				top: 0;
				opacity: 1;
			}

			.title {
				width: 400rpx;
			}

			.tabbox {
				background-color: #fff;
			}
		}

		.list {
			height: 100vh;
		}

		.menubox {
			.item {
				position: relative;

				&:after {
					content: '';
					width: 2rpx;
					height: 100rpx;
					position: absolute;
					top: calc(50% - 50rpx);
					right: 0;
					z-index: 2;
					background-color: rgba(229, 229, 229, .7);
				}

				&:last-child {
					&::after {
						display: none;
					}
				}

				.icon {
					width: 58rpx;
					height: 58rpx;
				}
			}
		}

		.searchbox {
			position: relative;
			margin-top: -60rpx;
			z-index: 1;

			.bgImage {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.title {
				position: relative;
				z-index: 2;

				.logo {
					width: 336rpx;
					height: 62rpx;
				}

				.brand {
					width: 106rpx;
					height: 44rpx;
				}
				
				// .brand_2 {
				// 	width: 212rpx;
				// 	height: 88rpx;
				// }
				// .brand_2 {
				// 	width: 170rpx;
				// 	height: 71rpx;
				// }
			}

			.search {
				position: relative;
				z-index: 2;
				background-color: #f2f2f2;

				.cfad {
					color: #FAD00D;
				}
			}
		}

		.tabbox {
			&.fixed {
				position: fixed;
				top: 250rpx;
				left: 0;
				width: 100%;
				z-index: 100;
				box-sizing: border-box;
				background: linear-gradient(-180deg, #f7de6a, #fbe47a, #fbf2cb);
			}

			.item {
				position: relative;

				.active {
					color: #1A1B20;
					font-weight: 600;
				}

				&::after {
					content: '';
					width: 2rpx;
					height: 26rpx;
					background-color: #CFCFCF;
					position: absolute;
					top: calc(50% - 12rpx);
					right: 24rpx;
				}

				&:nth-child(4) {
					&::after {
						display: none;
					}
				}

				.icon {
					width: 38rpx;
					height: 10rpx;
					position: absolute;
					bottom: -0rpx;
					left: calc(50% - 13rpx - 28rpx);
				}
			}

			.img {
				width: 236rpx;
			}

			.img2 {
				width: 306rpx;
			}
		}

		.contbox {
			.cont {
				position: absolute;
				height: 100%;
				width: 100%;
				top: 0;
				left: 0;

				.btn {
					color: #F59C1D;
					width: 126rpx;
					margin-top: 54rpx;
					background-color: rgba(255, 255, 255, .8);
				}
			}

			.left {
				position: relative;
				margin-left: 6px;

				.imgbg {
					width: 106%;
					height: 280rpx;
				}
			}

			.left2 {
				position: relative;
				margin-left: 14rpx;

				.imgbg {
					width: 93%;
					height: 130rpx;
				}

				.avatar {
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					position: relative;
					margin-left: -8rpx;
					border: 2rpx solid #fff;
				}
			}

			.right {

				.box {
					position: relative;

					&.box2 {
						right: 12rpx;
					}
				}

				.imgbg {
					width: 95%;
					height: 130rpx;
				}

				.imgbg2 {
					margin-top: -12rpx;
					width: 100%;
					height: 130rpx;
					position: relative;
				}

				.imgbg3 {
					width: 101%;
					height: 130rpx;
					position: relative;
				}
			}
		}

		.bg {
			width: 100%;
			height: 442rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.rel {
			position: relative;
			z-index: 1;
		}

		.c1a {
			color: #1a1a1a;
		}

		.down {
			width: 40rpx;
			height: 40rpx;
		}

		.sear {
			width: 24rpx;
			height: 24rpx;
		}

		.ml8 {
			margin-left: 18rpx;
		}

		.bgImg {
			height: 524rpx;
			image {
				height: 100% !important;
			}
		}
	}
</style>